<%--
  Created by IntelliJ IDEA.
  User: MSI-CN
  Date: 2021/5/19
  Time: 16:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!--
@name:
@description:
@author: lzy
@title: 天王盖地虎!!!
@time: 2021-05-19 16:36:38
-->
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>添加关键词</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <style>
        #box {
            width: 500px;
            margin: 50px auto;
        }

        table {
            height: 20%;
            text-align: center;
            border: 1px solid #cccccc;
        }

        th {
            text-align: center;
            background-color: #b3b3b3;
        }

        tr:not(:last-child) td:nth-child(1){
            padding-top: 17px !important;   /*!important 最大权限*/
            background-color: #b3b3b3;
        }

        td {
            position: relative;
        }

        td span {
            width: 100px;
            position: absolute;
            right: -110px;
            top: 35%;
            display: block;
            text-align: left;
            font-size: 10px;
            color: #d92727;
        }

    </style>
</head>
<body>
<div id="box">
    <form action="" method="post">
        <table border="1px" class="table">
            <tr>
                <th colspan="3">我的工作笔记</th>
            </tr>

            <tr>
                <td>标题</td>
                <td>    <!--autocomplete="off"关闭表单记录数据-->
                    <input type="text" autocomplete="off" id="title" placeholder="请输入关键词" class="form-control">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>内容</td>
                <td>
                    <textarea id="neirong"></textarea>
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>类别</td>
                <td>
                    <div class="form-group">
                        <select class="form-control" id="exampleFormControlSelect1">
                            <option id="1">技术</option>
                            <option id="2">行政</option>
                            <option id="3">人事</option>
                        </select>
                    </div>
                    <span></span>
                </td>
            </tr>

            <tr>
                <td colspan="3">
                    <button type="button" class="btn btn-primary" id="sub">提交</button>
                </td>
            </tr>
        </table>
    </form>
</div>

<script src="static/js/jquery-3.5.1.js"></script>
<script>
    $(function (){
        $("#sub").click(function () {
            if (check()){
                $.ajax({
                    url: "addInfo",
                    type: "post",
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    dataType:"text",
                    data:JSON.stringify({
                        "title":$("#title").val(),
                        "content":$("#neirong").val(),
                        "type":$("#exampleFormControlSelect1 option:selected").attr('id')
                    }),
                    success:function (addResult) {
                        if (addResult=="success"){
                            alert("添加成功！！！")
                            window.location.href="getAll"
                        }else {
                            alert("添加失败!!!!")
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });
            }
        });
        $("#title").blur(function () {
            $.ajax({
                url:"getByTitle",
                type:"post",
                data:{
                    "title":$("#title").val(),
                },
                success:function (result) {
                    console.log(result);
                    if (result=="fail"){
                        alert("标题已经存在！"+result)
                    }else {
                        alert("标题可用！")
                    }
                }
            });
        });
        $("form").submit(function (){
            if(check()){

            }else {
                return false;
            }
        })
        function check(){
            let flag = true;
            if($("#title").val().trim().length == 0){
                alert("标题不能为空")
                flag = false
            }
            if ($("#neirong").val().trim().length==0){
                alert("内容不能为空")
                flag = false;
            }
            return flag;
        }
    });
</script>
</body>
</html>